<template>
  <div class="city">
    <div class="city_title">
      <i class="iconfont icon-zuo" @click="goIndex"></i>
      <span class="selCity">选择城市</span>
    </div>
    <div class="city_search">
      <i class="iconfont icon-sousuo"></i>
      <input type="text" placeholder="请输入搜索关键词" />
    </div>
    <div class="currentCity">
      <p class="currentCityTitle">当前城市：</p>
      <p class="locationCity">{{locationCity?locationCity:"定位失败"}}</p>
    </div>
    <div class="hotCity">
      <p class="hotCityTitle">热门城市：</p>
      <ul class="hotCityBox">
        <template v-for="(item) in cityList">
          <li class="hotCityItem" :key="item.id">
            <span>{{item.n}}</span>
          </li>
        </template>
      </ul>
    </div>
    <div class="currentCity">
      <p class="currentCityTitle"></p>
      <span class="locationCity">普洱</span>
      <span class="locationCity">时光市</span>
    </div>
     <div class="hotCity" v-for="(item,index) in newCityList" :key="index">
      <p class="hotCityTitle" v-if="item.arr.length">{{item.capital}}</p>
      <ul class="hotCityBox">
        <template v-for="(val) in item.arr">
          <li class="hotCityItem" :key="val.id">
            <span>{{val.n}}</span>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      locationCity: "定位中",
      cityList: "",
      newCityList:[],
    };
  },
  watch: {},
  computed: {},
  methods: {
    goIndex() {
      this.$router.go(-1);
    },
    getPosition() {
      var that = this;
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(
        function(r) {
          //   console.log(r);
          // console.log(r.address.city);
          that.locationCity = r.address.city;
          //   console.log(that.locationCity);
        },
        { enableHighAccuracy: true }
      );
    },
    getCity() {
      this.$http.get("/api/cityList").then(res => {
        console.log(res);
        this.cityList = res.data.data.p.slice(0, 9);
        let allData = res.data.data.p;
        let newCity = [];
        for (var i = 65; i < 91; i++) {
          // console.log(String.fromCharCode(i));
          let capital = String.fromCharCode(i);
          newCity.push({ capital });
          // console.log(capital)
        }
        // console.log(newCity);

        for (var j = 0; j < newCity.length; j++) {
          newCity[j].arr = [];
          allData.forEach((val, index) => {
            let newCapital = val.pinyinFull[0].toUpperCase();
            if (newCity[j].capital == newCapital) {
              newCity[j].arr.push(val);
            }
          });
        }
        this.newCityList = newCity;
        console.log(this.newCityList)
      });
    }
  },
  created() {
    
  },
  mounted() {
    this.getPosition();
    this.getCity(); // 城市列表
    
  }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.city {
  .city_title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: vw(52);
    background: #1c2635;
    position: relative;
    i {
      width: vw(50);
      height: vw(52);
      line-height: vw(52);
      text-align: center;
      display: inline-block;
      font-size: vw(18);
      color: #eee;
      position: absolute;
      top: 0;
      left: 0;
    }
    .selCity {
      font-size: vw(18);
      color: #fff;
    }
  }
  .city_search {
    width: 100%;
    height: vw(60);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-bottom: vw(1) solid #999;
    input {
      display: inline-block;
      width: vw(312);
      height: vw(40);
      border: 1px solid #999;
      border-radius: vw(10);
      box-sizing: border-box;
      padding: 0 0 0 vw(30);
      font-size: vw(18);
    }
    i {
      font-size: vw(26);
      position: absolute;
      top: vw(16);
      left: vw(36);
    }
  }
  .currentCity {
    border-bottom: 1px solid #999;
    .currentCityTitle {
      width: 100%;
      height: vw(35);
      line-height: vw(35);
      color: #777;
      background-color: #ebebeb;
      box-sizing: border-box;
      padding: 0 vw(18);
    }
    .locationCity {
      width: 100%;
      height: vw(35);
      line-height: vw(35);
      box-sizing: border-box;
      padding: 0 vw(18);
    }
  }
  .hotCity {
    border-bottom: 1px solid #999;
    .hotCityTitle {
      width: 100%;
      height: vw(35);
      line-height: vw(35);
      color: #777;
      background-color: #ebebeb;
      box-sizing: border-box;
      padding: 0 vw(18);
    }
    .hotCityBox {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .hotCityItem {
        display: inline-block;
        width: 25%;
        height: vw(35);
        line-height: vw(35);
        text-align: center;
      }
    }
  }
}
</style>